<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header class="header " th:fragment="sidebar">
    <h1 th:if="${user!=null}" class="blog-name pt-lg-4 mb-0"><a th:href="@{/user/logout}">注销</a></h1>
    <h1 th:if="${user!=null}" class="blog-name pt-lg-4 mb-0"><a th:href="@{/article/toWriteBlog}">写博客</a></h1>
    <h1 th:if="${user!=null}" class="blog-name pt-lg-4 mb-0"><a th:href="@{/user/toIndex}" th:text="${user.getNickname()}+'\'s Blog'"></a></h1>
    <nav class="navbar navbar-expand-lg navbar-dark" >
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navigation" class="collapse navbar-collapse flex-column" >
            <div class="profile-section pt-3 pt-lg-0">
                <img th:if="${user!=null}" class="profile-image mb-3 rounded-circle mx-auto" th:src="@{/assets/images/profile.jpg}" alt="image" >
                <div th:if="${user!=null}" class="bio mb-3" th:text="${user.getBriefIntroduction()}"><br><a th:href="@{/user/toAboutMe}">Find out more about me</a></div><!--//bio-->
<!--                <ul class="social-list list-inline py-3 mx-auto">-->
<!--                    <li class="list-inline-item"><a href="#"><i class="fab fa-twitter fa-fw"></i></a></li>-->
<!--                    <li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in fa-fw"></i></a></li>-->
<!--                    <li class="list-inline-item"><a href="#"><i class="fab fa-github-alt fa-fw"></i></a></li>-->
<!--                    <li class="list-inline-item"><a href="#"><i class="fab fa-stack-overflow fa-fw"></i></a></li>-->
<!--                    <li class="list-inline-item"><a href="#"><i class="fab fa-codepen fa-fw"></i></a></li>-->
<!--                </ul>-->
                <hr>
            </div><!--//profile-section-->
            <ul class="navbar-nav flex-column text-left">
                <li class="nav-item active">
                    <a class="nav-link" style="font-size: 2em" th:href="@{/user/toIndex}"><i class="fas fa-home fa-fw mr-2"></i>主页 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" style="font-size: 2em" th:href="@{/user/links}"><i class="fas fa-home fa-fw mr-2"></i>友链 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" style="font-size: 2em" href="https://blog.zaiolos.top/admin"><i class="fas fa-home fa-fw mr-2"></i>进入后台 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" style="font-size: 2em" th:href="@{/article/toBlogList}"><i class="fas fa-bookmark fa-fw mr-2"></i>Blog Post</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" style="font-size: 2em" th:href="@{/user/toAboutMe}"><i class="fas fa-user fa-fw mr-2"></i>About Me</a>
                </li>
            </ul>
            <div class="my-2 my-md-3">
                <a class="btn btn-primary" href="#" target="_blank">Get in Touch</a>
            </div>
        </div>
    </nav>
</header>

<div th:fragment="footer">
    <footer class=" text-center py-2 theme-bg-dark bottom" style="position:fixed;bottom:0;height: 30px;font-size: 18px; width: 100%;color: #FFFFFF">
        <small class="copyright">Copyright &copy; 2021.Company name All rights reserved. <a target="_blank" th:href="@{https://github.com/hnistzdk}">myGitHub</a></small>
    </footer>
</div>


<!--自定义主题-->
<div id="config-panel" class="config-panel d-none d-lg-block" th:fragment="diyTheme">
    <div class="panel-inner">
        <a id="config-trigger" class="config-trigger config-panel-hide text-center" href="#"><i class="fas fa-cog fa-spin mx-auto" data-fa-transform="down-6" ></i></a>
        <h5 class="panel-title">Choose Colour</h5>
        <ul id="color-options" class="list-inline mb-0">
            <li class="theme-1 active list-inline-item"><a data-style="/assets/css/theme-1.css" href="#"></a></li>
            <li class="theme-2  list-inline-item"><a data-style="/assets/css/theme-2.css" href="#"></a></li>
            <li class="theme-3  list-inline-item"><a data-style="/assets/css/theme-3.css" href="#"></a></li>
            <li class="theme-4  list-inline-item"><a data-style="/assets/css/theme-4.css" href="#"></a></li>
            <li class="theme-5  list-inline-item"><a data-style="/assets/css/theme-5.css" href="#"></a></li>
            <li class="theme-6  list-inline-item"><a data-style="/assets/css/theme-6.css" href="#"></a></li>
            <li class="theme-7  list-inline-item"><a data-style="/assets/css/theme-7.css" href="#"></a></li>
            <li class="theme-8  list-inline-item"><a data-style="/assets/css/theme-8.css" href="#"></a></li>
        </ul>
        <a id="config-close" class="close" href="#"><i class="fa fa-times-circle"></i></a>
    </div><!--//panel-inner-->
</div><!--//configure-panel-->



</html>
